<style lang="scss" scoped>
    .navbar-auto {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 5px;
        position: relative;

        .navbar-item {
            display: flex;
            align-items: center;
            margin-right: 5px;
            border-radius: 3px;
            cursor: pointer;
            white-space: nowrap;
            color: #fff;

            &:hover {
                color: #25B7D3
            }

            &:last-child {
                margin-right: 0;
            }
        }

        .checked {
            color: #25B7D3;
            background: rgba(#fff, .2);
            border-radius: 3px;
        }

        .more {
            display: none;
        }

        .more-btn {
            display: flex;
            align-items: center;
            width: 50px;
            padding: 5px;
            white-space: nowrap;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
            color: #fff;
        }

    }
</style>
<template>
    <div class="navbar-auto" v-if="navData.length > 0">
        <template v-if="boxWidth">
            <template v-for="(item, index) in navData">
                <div ref="navbarItem" :class="['navbar-item', {'checked':item.id == checked}, {'more': item._more}]"
                    :key="index" @click="changeNav(item)">
                    <slot :$index="index" :item="item"></slot>
                </div>
            </template>
        </template>
        <el-dropdown v-if="hideItems.length > 0" size="medium" style="display:flex" @command="handleCommand">
            <span class="more-btn">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <template v-for="(item, index) in hideItems">
                    <el-dropdown-item :key="index" :command="item" :style="item.id === checked ? 'color: #25B7D3' : ''">
                        <div>
                            <slot name="hideItem" :$index="index" :item="item"></slot>
                        </div>
                    </el-dropdown-item>
                </template>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
    import ResizeObserver from 'resize-observer-polyfill'

    import { debounce } from 'lodash'

    export default {
        name: 'ui-navbar-auto',
        props: {
            navData: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                checked: 0,
                boxWidth: null,
                hideItems: [],
                moreB: false,
                flag: true
            }
        },
        watch: {
            boxWidth() {
                this.navData.forEach(item => {
                    item._more = false
                })
                this.$nextTick(() => {
                    this._getItmeWidth()
                    this.calculate()
                })
            },
            navData: {
                deep: true,
                handler(val) {
                    if (val.length > 0 && !this.boxWidth) {
                        this.getResize()
                    }
                    this.$nextTick(() => {
                        this._getItmeWidth()
                        this.calculate()
                    })
                },
                immediate: true
            }
        },
        /*mounted(){
            if (this.navData.length) {
                this.getResize()
            }
        },*/
        methods: {
            getResize() {
                this.$nextTick(() => {
                    let box = document.querySelector('.navbar-auto')
                    const ro = new ResizeObserver(() => {
                        this.getBoxWidth()
                    })
                    box && ro.observe(box)
                })
            },
            changeNav(item) {
                this.checked = item.id
                this.$emit('changeNav', item)
            },
            getBoxWidth: debounce(function() {
                this.boxWidth = document.querySelector('.navbar-auto') && document.querySelector('.navbar-auto').offsetWidth
            }, 200),
            showMore() {
                this.moreB = true
            },
            hideMore() {
                this.moreB = false
            },
            calculate() {
                let itemsWidth = 0
                for (let index = 0; index < this.navData.length; index++) {
                    itemsWidth += this.navData[index]._itemWidth + 5
                    if (this.boxWidth < itemsWidth + (index === this.navData.length - 1 ? 5 : 60)) {
                        this.navData[index]._more = true
                    }
                }

                this.hideItems = this.navData.filter(item => {
                    return item._more
                })
            },
            _getItmeWidth() {
                let items = this.$refs.navbarItem
                if (items && items.length) {
                    for (let index = 0; index < items.length; index++) {
                        const el = items[index]
                        this.navData[index]._itemWidth = el.offsetWidth
                    }
                }
                this.flag = false
            },
            handleCommand(command) {
                this.changeNav(command)
            }
        }
    }
</script>
